<template>
  <div class="user-management">
    <!-- 操作按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="openAddDialog">新增用户</el-button>

    <!-- 用户信息表格 -->
    <el-table :data="paginatedUsers" style="width: 100%" stripe>
      <el-table-column label="编号" prop="id" width="120" align="center" />
      <el-table-column label="用户名" prop="name" width="180" />
      <el-table-column label="累计开台时间" prop="itme" width="180" />
      <el-table-column label="斗志值" prop="fight" width="120" />
      <el-table-column label="豪气值" prop="heroism" width="120" />
      <el-table-column label="头像" prop="avatar" width="120">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="头像" style="width: 40px; height: 40px; border-radius: 50%;" />
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="cardas_name" width="180" />
      <el-table-column label="生日" prop="birthday" width="180" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" size="small" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控制和每页条数选择 -->
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="users.length"
          layout="total, prev, pager, next, jumper"
          @current-change="handlePageChange"
          class="pagination"
      />
      <el-select v-model="pageSize" class="page-size-select" @change="handlePageSizeChange" placeholder="每页显示条数">
        <el-option label="3条" :value="3"></el-option>
        <el-option label="5条" :value="5"></el-option>
        <el-option label="10条" :value="10"></el-option>
        <el-option label="20条" :value="20"></el-option>
      </el-select>
    </div>

    <!-- 新增/编辑用户弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="400px">
      <el-form :model="currentUser" :rules="rules" ref="userForm" label-width="80px">
        <el-form-item label="编号" prop="id">
          <el-input v-model="currentUser.id" placeholder="请输入编号" readonly />
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="currentUser.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="currentUser.password" placeholder="请输入密码" type="password" />
        </el-form-item>
        <el-form-item label="累计开台时间" prop="itme">
          <el-input v-model="currentUser.itme" placeholder="请输入累计开台时间" />
        </el-form-item>
        <el-form-item label="斗志值" prop="fight">
          <el-input v-model="currentUser.fight" placeholder="请输入斗志值" />
        </el-form-item>
        <el-form-item label="豪气值" prop="heroism">
          <el-input v-model="currentUser.heroism" placeholder="请输入豪气值" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <el-input v-model="currentUser.avatar" placeholder="请输入头像URL" />
        </el-form-item>
        <el-form-item label="姓名" prop="cardas_name">
          <el-input v-model="currentUser.cardas_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="currentUser.birthday" type="date" placeholder="选择生日" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 三条静态测试数据
      users: [
        {
          id: 1,
          name: '小明',
          itme: '20小时',
          fight: '30场',
          heroism: '500元',
          avatar: 'https://www.example.com/avatar1.png',
          cardas_name: '小明的名字',
          birthday: '1995-05-20',
        },
        {
          id: 2,
          name: '小红',
          itme: '25小时',
          fight: '40场',
          heroism: '800元',
          avatar: 'https://www.example.com/avatar2.png',
          cardas_name: '小红的名字',
          birthday: '1993-08-15',
        },
      ],
      currentUser: {
        id: null,
        name: '',
        password: '',
        itme: '',
        fight: '',
        heroism: '',
        avatar: '',
        cardas_name: '',
        birthday: '',
      },
      currentPage: 1, // 当前页
      pageSize: 3,    // 每页显示的数据条数
      dialogVisible: false, // 控制弹窗显示/隐藏
      dialogTitle: '新增用户', // 弹窗标题
      rules: {
        id: [{ required: true, message: '请输入编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        itme: [{ required: true, message: '请输入累计开台时间', trigger: 'blur' }],
        fight: [{ required: true, message: '请输入斗志值', trigger: 'blur' }],
        heroism: [{ required: true, message: '请输入豪气值', trigger: 'blur' }],
        avatar: [{ required: true, message: '请输入头像URL', trigger: 'blur' }],
        cardas_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        birthday: [{ required: true, message: '请选择生日', trigger: 'change' }],
      },
    };
  },
  computed: {
    // 根据分页数据计算当前页的数据
    paginatedUsers() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.users.slice(start, end);
    }
  },
  methods: {
    // 打开新增用户弹窗
    openAddDialog() {
      this.currentUser = { id: null, name: '', password: '', itme: '', fight: '', heroism: '', avatar: '', cardas_name: '', birthday: '' };
      this.dialogTitle = '新增用户';
      this.dialogVisible = true;
    },
    // 打开编辑用户弹窗
    openEditDialog(user) {
      this.currentUser = { ...user };
      this.dialogTitle = '编辑用户';
      this.dialogVisible = true;
    },
    // 保存用户（新增或编辑）
    saveUser() {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          if (this.currentUser.id) {
            // 编辑操作
            const index = this.users.findIndex(user => user.id === this.currentUser.id);
            this.$set(this.users, index, this.currentUser);
          } else {
            // 新增操作
            this.currentUser.id = this.users.length + 1;
            this.users.push(this.currentUser);
          }
          this.dialogVisible = false;
          this.$message.success(`${this.dialogTitle === '新增用户' ? '新增' : '编辑'}成功`);
        }
      });
    },
    // 删除用户
    deleteUser(user) {
      this.$confirm('确认删除该用户吗?', '删除用户', {
        type: 'warning',
      }).then(() => {
        this.users = this.users.filter(item => item.id !== user.id);
        this.$message.success('删除成功');
      }).catch(() => {});
    },
    // 切换当前页
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 切换每页显示的条数
    handlePageSizeChange(size) {
      this.pageSize = size;
    }
  }
};
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-button {
  margin-right: 10px;
}

.el-table .cell img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.page-size-select {
  margin-left: 10px;
  width: 150px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
